<template>
    <div id="certificateIncrease" style="width: 100%; height: 400px;"></div>
</template>

<script setup lang="ts">

import * as echarts from 'echarts/core';
import {
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    LegendComponentOption
} from 'echarts/components';
import { LineChart ,BarSeriesOption} from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

import { ref, onMounted, getCurrentInstance, shallowRef } from "vue";

type EChartsOption = echarts.ComposeOption<
    | DatasetComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | LegendComponentOption
    | BarSeriesOption
>;
// var option: EChartsOption;
var option: any;
const chartDom = ref<HTMLElement | null>(null);
// 这里不能用ref,否则提示框会不显示的
const myChart = shallowRef();

import { certificateIncrease } from "@/api/request/commendation/znlecharts";

const { proxy } = getCurrentInstance() as any;



onMounted(() => {
    chartDom.value = document.getElementById("certificateIncrease")!;
    myChart.value = echarts.init(chartDom.value as HTMLElement);


    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['国家级', '省部级', '地市级', '校级']
        },
        xAxis: {
            type: 'category',
            name:'时间',
            boundaryGap: false,
            data: ['2023-12-21', '2023-12-22', '2023-12-23', '2023-12-24', '2023-12-25', '2023-12-26', '2023-12-27']
        },
        yAxis: {
            type: 'value',
            name: '数量'
        },
        series: [
            {
                name: '国家级',
                type: 'line',

                data: [50, 12, 21, 54, 260, 830, 710]
            },
            {
                name: '省部级',
                type: 'line',

                data: [30, 182, 434, 791, 390, 30, 10]
            },
            {
                name: '地市级',
                type: 'line',

                data: [0, 1132, 601, 234, 120, 90, 20]
            },
            {
                name: '校级',
                type: 'line',

                data: [0, 876, 601, 234, 12, 90, 20]
            }
        ]
    };

    option && myChart.value.setOption(option);


    certificateIncreaseReq({});

})

const certificateIncreaseReq = (query: object) => {
    certificateIncrease(query).then((response: any) => {
        option.xAxis = response.xAxis;
        option.series = response.series;
        myChart.value.setOption(option);
    })
}

defineExpose({
    certificateIncreaseReq
})

</script>